<div id="stylized-form">
	<h2><!--[gt text='Hotel Member Form Admin']--></h2>
	<form method="post" action="<!--[pnmodurl modname=hotelbooking type=adminform func=submit ctrl=hotelmember]-->">
  <input name="form[id]" type="hidden" size="40" value="<!--[$smarty.get.id]-->" />	
	<div class="wrapper-block">
		<label for="user">
			<!--[gt text='Hotel Name']-->
		</label>
		<input name="form[hotelName]" type="text" size="40" value="<!--[$form.hotelName]-->" />
	</div>
  <div class="wrapper-block">
		<label for="user">
			<!--[gt text='Description']-->
		</label>
		<textarea name="form[description]" rows="2" cols="20" /><!--[$form.description]--></textarea>
	</div>
  <div class="wrapper-block">
		<label for="user">
			<!--[gt text='Accommodation']-->
		</label>
		<textarea name="form[accommodation]" rows="2" cols="20" /><!--[$form.accommodation]--></textarea>
	</div>
  <div class="wrapper-block">
		<label for="user">
			<!--[gt text='Facilities']-->
		</label>
		<textarea name="form[facilities]" rows="2" cols="20" /><!--[$form.facilities]--></textarea>
	</div>  
  <div class="wrapper-block">
		<label for="user">
			<!--[gt text='Restaurant']-->
		</label>
		<textarea name="form[restaurant]" rows="2" cols="20" /><!--[$form.restaurant]--></textarea>
	</div>
  <div class="wrapper-block">
		<label for="user">
			<!--[gt text='Contactus']-->
		</label>
		<textarea name="form[contactus]" rows="2" cols="20" /><!--[$form.contactus]--></textarea>
	</div>
  <div class="wrapper-block">
		<label for="user">
			<!--[gt text='Other']-->
		</label>
		<textarea name="form[other]" rows="2" cols="20" /><!--[$form.other]--></textarea>
	</div> 
	
	
	
	<script type="text/javascript">
          function validateForm(form) {

              //Check category
              var name = document.getElementById("name");
              if (name.value == '') {
                  alert("Please enter value.");
                  document.getElementById('error-name').innerHTML = " <FONT COLOR=\"#FF0000\">Please enter value.</FONT>";
                  name.focus();
                  return false;
              }else{
                  document.getElementById('error-name').innerHTML = "";
              }
              
              //Check latitude
              var latitude = document.getElementById("latitude");
              if (latitude.value == '') {
                  alert("Please enter value.");
                  document.getElementById('error-latitude').innerHTML = " <FONT COLOR=\"#FF0000\">Please enter value.</FONT>";
                  latitude.focus();
                  return false;
              }else{
                  document.getElementById('error-latitude').innerHTML = "";
              }
              //Check longitude
              var longitude = document.getElementById("longitude");
              if (longitude.value == '') {
                  alert("Please enter value.");
                  document.getElementById('error-longitude').innerHTML = " <FONT COLOR=\"#FF0000\">Please enter value.</FONT>";
                  longitude.focus();
                  return false;
              }else{
                  document.getElementById('error-longitude').innerHTML = "";
              }
          }
      </script>

			<!-- #################################################### -->
			<!-- Start Map code -->
			<!-- #################################################### -->


  

      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">
      var geocoder = new google.maps.Geocoder();    
			var markersArray = [];
			var marker;    
			
      function geocodePosition(pos) {
        geocoder.geocode({
          latLng: pos
        }, function(responses) {
          if (responses && responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
          } else {
            updateMarkerAddress('Cannot determine address at this location.');
          }
        });
      }

      function updateMarkerStatus(str) {
        document.getElementById('markerStatus').innerHTML = str;
      }

      function updateMarkerPosition(latLng) {

        document.getElementById("latitude").value = latLng.lat();
        document.getElementById("longitude").value = latLng.lng();
        document.getElementById('info').innerHTML = [
          latLng.lat(),
          latLng.lng()
        ].join(', ');


      }

      function updateMarkerAddress(str) {
        document.getElementById('address').innerHTML = str;
      }

      function initialize() {
        <!--[if $form.latitude && $form.longitude]-->
         var latLng = new google.maps.LatLng(<!--[$form.latitude]-->, <!--[$form.longitude]-->);
        <!--[else]-->
         var latLng = new google.maps.LatLng(7.968967853297759,98.32956784667977);
        <!--[/if]-->

        var map = new google.maps.Map(document.getElementById('mapCanvas'), {
            scrollwheel: false,
          zoom: 11,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        });
        
        
        marker = new google.maps.Marker({
          position: latLng,
          title: '<!--[$form.name]-->',
          map: map,
          draggable: true
        });
        
        
				markersArray.push(marker); 				
        google.maps.event.addListener(map, 'click', function(e) {
          placeMarker(e.latLng, map);
        });        
        
        // Update current position info.
        updateMarkerPosition(latLng);
        geocodePosition(latLng);
        
        /*
        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function() {
          updateMarkerAddress('Dragging...');
        });
        
        google.maps.event.addListener(marker, 'drag', function() {
          updateMarkerStatus('Dragging...');
          updateMarkerPosition(marker.getPosition());
        });
        
        google.maps.event.addListener(marker, 'dragend', function() {
          updateMarkerStatus('Drag ended');
          geocodePosition(marker.getPosition());
        });
        */
      }
      
      function placeMarker(position, map) {
      
      	//alert(position);
      	//Clean marker point
      	clearOverlays();
      	
      	//Make new marker object
        marker = new google.maps.Marker({
          position: position,
          map: map
        });
        
        //Add marker to array
				markersArray.push(marker); 
				
				//Write marker to map       
        map.panTo(position);
        
        updateMarkerAddress('Clicking...'); 
        
				updateMarkerStatus('Clicking...');
				updateMarkerPosition(marker.getPosition());  
				
				updateMarkerStatus('Click ended');
				geocodePosition(marker.getPosition());				             
      }
      
			function clearOverlays() {
				if (markersArray) {
					for (i in markersArray) {
						markersArray[i].setMap(null);
					}
				}
			}        

      // Onload handler to fire off the app.
      google.maps.event.addDomListener(window, 'load', initialize);
      
      </script>
			<!-- #################################################### -->      
			<!-- End Map code -->
			<!-- #################################################### -->			
			
			
      <div style="clear:both"></div>
	  <TABLE width="100%" style="float:left;">
	  
      <TR>
        <TD valign="top" width="650">

              <style>
              #mapCanvas { width: 100%; height:600px; float: left;position:relative;
                }
              #infoPanel {float: left; margin-left: 10px;
                }
              #infoPanel div { margin-bottom: 5px;
                }
              </style>

              <div id="mapCanvas"></div>

        </TD>
        <TD valign="top" width="150">
  
                    <TABLE width='150' border="0" height="200">
                        <TR>
                            <TD class='td-label' align="left"><B><!--[gt text="Latitude"]--></B></TD>
                        </TR>
                        <TR>
                            <TD align="left">
                              <input id="latitude" type="text" name="form[latitude]" value="<!--[$form.latitude]-->" title="latitude" class="required" size="30"  /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                              <span id='error-latitude'></span>
                            </TD>
                        </TR>
                        <TR>
                            <TD class='td-label' align="left"><B><!--[gt text="Longitude"]--></B></TD>
                        </TR>
                        <TR>
                            <TD align="left">
                              <input id="longitude" type="text" name="form[longitude]" value="<!--[$form.longitude]-->" title="longitude" class="required" size="30" /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                              <span id='error-longitude'></span>
                            </TD>
                        </TR>
                    </TABLE>
               <BR>
              <hr>
              <div id="infoPanel" style="width:200px;">
                <b><!--[pnml name="_POBHOTEL_ADMIN_LEGEND_MAP_MARKERSTATUS"]--></b>
                <div id="markerStatus"><i><!--[pnml name="_POBHOTEL_ADMIN_LEGEND_MAP_CLICKANDDRAGTHEMARKER"]--></i></div>
                <b><!--[pnml name="_POBHOTEL_ADMIN_LEGEND_MAP_CURRENTPOSITION"]--></b>
                <div id="info"></div>
                <b><!--[pnml name="_POBHOTEL_ADMIN_LEGEND_MAP_CLOSESTMATCHINGADDRESS"]--></b>
                <div id="address"></div>
              </div>
        </TD>
      </TR>
      </TABLE>
	  
	  
	  
	<input type="submit" value="submit">
	</form>
</div>